import { computed, h, reactive, ref } from "vue";
import { NButton, NSpace } from "naive-ui";
import { Layer } from "slash-layer";
import form from "./SysTbDictGroupUpdate.vue";
import httpApi from "./httpApi";

/**
 * 视图控制
 */
export const vCtl = reactive( {
  addBtn: computed(() => {
    return false;
  }),
  updateBtn: computed(() => {
    return true;
  }),
  delBtn: computed(() => {
    return true;
  })

});
export const initQuery = {};
export const queryForm = ref<any>(JSON.parse(JSON.stringify(initQuery)));
export const tableRef = ref<any>();

export function reloadTable() {
  if (tableRef.value) {
    tableRef.value.reload();
  }

}

/**
 * 选中的数据
 */
export const checkedRows = ref<any>([]);

/**
 * 选中行
 * @param rows
 */
export async function onCheckedRowEvent(rows: any[]) {
  checkedRows.value = rows;
}

/**
 * 枚举字段
 */
export const enabledTextEnum = reactive(
  {
    1: {
      text: "启用",
      style: "info"
    },
    0: {
      text: "禁用",
      style: "error"
    }
  }
);
export const allowTextEnum = reactive(
  {
    1: {
      text: "允许",
      style: "info"
    },
    0: {
      text: "禁止",
      style: "error"
    }
  }
);
export const allowOptions = computed(() => {
  const temp: any = [];
  Object.keys(allowTextEnum).forEach(function(key: any) {
    temp.push({
      value: parseInt(key),
      label: allowTextEnum[key].text
    });
  });
  return temp.reverse();
});
export const getEnabledTextEnum = (key: number | string) => {
  return enabledTextEnum[key].text || `--`;
};

export const getEnabledStyleEnum = (key: number | string) => {
  return enabledTextEnum[key].style || `--`;
};
export const enabledOptions = computed(() => {
  const temp: any = [];
  Object.keys(enabledTextEnum).forEach(function(key: any) {
    temp.push({
      value: parseInt(key),
      label: enabledTextEnum[key].text
    });
  });
  return temp.reverse();
});


/**
 * 更新弹框
 * @param row
 */
export async function doUpdateModal(row: any) {
  if (checkedRows.value.length != 1 && !row) {
    Layer.error("请选择数据条目后操作");
    return;
  }
  if (!row) {
    row = {
      id: checkedRows.value[0]
    };
  }
  await Layer.updateForm({
    title: "编辑字典组",
    content: {
      component: form,
      props: { ...row }
    }
  } as any);
  await reloadTable();
}

/**
 * 新增
 * @param row
 */
export async function doSaveModal(row: any) {
  console.log("传递的数据:{}", row);
  await Layer.createForm({
    title: "新增字典分组",
    position: "sm",
    content: {
      component: form,
      props: {
        parentGroupCode: row.groupCode
      }
    }
  } as any);
  await reloadTable();


}

/**
 * 删除
 * @param row
 */
export async function doDeleteModal(row: any) {
  let ids: any = [];
  if (!row) {
    ids = [...checkedRows.value];
  }
  if (row) {
    ids.push(row.id);
  }

  if (ids.length == 0) {
    Layer.error("请选择要删除的数据条目");
    return;
  }
  await Layer.confirm("您确定删除选中记录么");
  await httpApi.doLogicDeleteEntity(ids);
  await reloadTable();
}

/**
 * 查看表单
 * @param row
 */
export async function doReadModal(row: any) {
  if (checkedRows.value.length != 1 && !row) {
    Layer.error("请选择数据条目后操作");
    return;
  }
  if (!row) {
    row = {
      id: checkedRows.value[0]
    };
  }
  await Layer.readForm({
    title: "编辑字典组",
    position: "sm",
    content: {
      component: form,
      props: { ...row }
    }
  } as any);
}

/**
 * 列表页面列
 */
export const tableColumns = [
  {
    title: "选中",
    key: "id",
    type: "selection",
    fixed: "left",
    width: 50,
    disabled(row: any) {
      return row.name === "Edward King 3";
    }
  },
  {
    title: "分组名称",
    key: "groupName",
    sorter: "groupName",
    width: 150
  },
  {
    title: "分组编码",
    key: "groupCode",
    sorter: "groupCode",
    width: 150
  },
  {
    title: "允许编辑",
    key: "allowEdit",
    sorter: "allowEdit",
    width: 150
  },
  {
    title: "允许删除",
    key: "allowDel",
    sorter: "allowDel",
    width: 150
  },
  {
    title: "上级编码",
    key: "parentGroupCode",
    sorter: "parentGroupCode",
    width: 150
  },
  {
    title: "完整目录",
    key: "fullGroupCode",
    sorter: "fullGroupCode",
    width: 150
  },
  {
    title: "完整分组名称",
    key: "fullGroupName",
    sorter: "fullGroupName",
    width: 150
  },
  {
    title: "排序号",
    key: "orderIndex",
    sorter: "orderIndex",
    width: 150
  },

  {
    title: "创建时间",
    key: "createTime",
    width: 160,
    sorter: "createTime"
  },
  {
    title: "更新时间",
    key: "updateTime",
    width: 160,
    sorter: "updateTime"
  },
  {
    title: "操作",
    key: "id",
    type: "id",
    width: 160,
    render: function(row: any) {
      return h(NSpace, [
        h(NButton, {
          onVnodeMounted: async (vNode: any) => {
            //await checkAuthShow(vNode.el as any, "1P76CZFAXE");
          },
          type: "primary",
          text: true,
          onClick: (async (row: any) => {
            await doUpdateModal(row);
          }).bind(null, row)
        }, "编辑"),
        h(NButton, {
          onVnodeMounted: async (vNode: any) => {
            // await checkAuthShow(vNode.el as any, "HT4UR87SIB");
          },
          type: "primary",
          text: true,
          onClick: (async (row: any) => {
            await doDeleteModal(row);
          }).bind(null, row)
        }, "删除")
      ]);
    }
  }
];
/**
 * 新增和更新校验规则
 */
export const formRules = reactive({
    groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
    groupCode: [{ required: true, message: "请输入分组编码", trigger: "blur" }],
    allowEdit: [{ required: true, message: "请输入允许编辑", trigger: "blur" }],
    allowDel: [{ required: true, message: "请输入允许删除", trigger: "blur" }],
    fullGroupCode: [{ required: true, message: "请输入完整目录", trigger: "blur" }],
    fullGroupName: [{ required: true, message: "请输入完整分组名称", trigger: "blur" }],
    orderIndex: [{ required: true, message: "请输入排序号", trigger: "blur" }]
  })
;

